<template>
  <div class="am-combination-detailsPage details-page app-container1">
    <pubChunk>
      <div slot="title">
        <div class="title">
          {{ info.compositionName }}
          <el-tooltip
            v-if="info.mark"
            popper-class="tit-tip"
            :open-delay="500"
            :content="info.mark"
            placement="right"
          >
            <i class="el-icon-document fontdoc" style="font-size: 16px"></i>
          </el-tooltip>
        </div>
        <!-- <el-button
          type="small"
          @click="weekMonDialogVisible = true"
          style="vertical-align: text-bottom;"
        >
          周/月报告
        </el-button> -->
      </div>
      <div slot="headLeft" style="width: 314px">
        <el-button size="small" type="primary" @click="goContrast">
          <i class="iconfont icon-jia"></i>
          去对比
        </el-button>
        <el-button size="small" type="primary" @click="goConfigPage">
          <svg-icon icon-class="caidan" style="margin-right: 6px" />
          配置组合
        </el-button>
        <el-button size="small" @click="refreshPage">
          <i class="iconfont icon-shuaxin"></i>
          刷新
        </el-button>
      </div>

      <div class="head3">
        <div class="head-content flex">
          <div class="left">
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>单位净值：</p>
                    <p class="fs12 tip">
                      {{ info.netWorthEndTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    {{ info.compositionNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>今年以来收益率：</p>
                    <p class="fs12 tip">
                      截止至{{ info.netWorthEndTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[0].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[0].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[0].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else class="fzBig">/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div
                    class="label label-line2"
                    style="width: 138.69px; text-align: right"
                  >
                    <p>成立以来收益率：</p>
                    <p class="fs12 tip tof">
                      成立日期：{{ info.netWorthTime | parseTime }}
                    </p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[7].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[7].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[7].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else class="fzBig">/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 16px">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    累计净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{ info.compositionNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近3月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[2].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[2].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[2].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    年化收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="info.riskIndicatorsBean"
                      :class="
                        info.riskIndicatorsBean.annualizedIncomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.riskIndicatorsBean.annualizedIncomeRate | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px; text-align: right">
                    复权净值：
                  </div>
                  <div class="fromLine-content fw">
                    {{ info.compositionNetWorth }}
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近6月收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[3].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[3].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[3].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    夏普比率：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">
                      {{ info.riskIndicatorsBean.sharpeRate | toFixed2 }}
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8"><div style="height: 22px"></div></el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px; text-align: right">
                    近1年收益率：
                  </div>
                  <div class="fromLine-content fw">
                    <span
                      v-if="
                        info.compositionNetWorthExtendBeans &&
                        info.compositionNetWorthExtendBeans[4].incomeRate
                      "
                      :class="
                        info.compositionNetWorthExtendBeans[4].incomeRate > 0
                          ? 'positiveFc1'
                          : 'negativeFc1'
                      "
                    >
                      {{
                        info.compositionNetWorthExtendBeans[4].incomeRate
                          | toFixed2
                      }}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px; text-align: right">
                    最大回撤：
                  </div>
                  <div class="fromLine-content fw">
                    <span v-if="info.riskIndicatorsBean">
                      {{ info.riskIndicatorsBean.maximumDrawdownRate }}
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="fromLine">
              <div class="label label-line2">
                <p>资产金额：</p>
                <p class="fs12 tip tof">单位：万元</p>
              </div>
              <div class="fromLine-content fzBig">{{ info.initMoney }}</div>
            </div>
            <div class="fromLine" style="margin-top: 15px">
              <div class="label">开始日期：</div>
              <div class="fromLine-content fw">
                {{ info.netWorthTime | parseTime }}
              </div>
            </div>
            <!-- <div class="fromLine">
              <div class="label">复利周期：</div>
              <div class="fromLine-content fw">
                {{ warehouseAdjustmentCycleCom }}
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </pubChunk>

    <div class="nav flex-h-sb">
      <div class="nav-left flex">
        <div
          class="nav-item"
          :class="{ typePage: typePage == 1 }"
          @click="curNavHandle(1)"
        >
          组合分类分析
        </div>
        <div
          class="nav-item"
          :class="{ typePage: typePage == 2 }"
          @click="curNavHandle(2)"
        >
          组合投资分析
        </div>
        <!-- <div
          v-if="info.hasChildrenInvestType"
          class="nav-item"
          :class="{ typePage: typePage == 3 }"
          @click="curNavHandle(3)"
        >
          组合子投资分析
        </div> -->
      </div>
      <div class="nav-right flex-v-center">
        <span style="font-size: 14px; color: #606266; font-weight: 700">
          对比指标：
        </span>
        <indexSelectTree
          style="margin: 0 30px 0 10px"
          size="small"
          :indexType.sync="indexType"
          :clearable="false"
          @contrastOptionsObj="contrastOptionsObj"
          :width="300"
        ></indexSelectTree>
        <el-button size="small" @click="refreshPage">重置</el-button>
      </div>
    </div>

    <addOrUpdateDialog
      ref="addOrUpdateOpen"
      @closeOpen="refreshPage"
      type="update"
      :addOrUpdateView.sync="addOrUpdateView"
      :row="{ compositionId: compositionId }"
    ></addOrUpdateDialog>
    <chunk1
      v-if="typePage != 3 && info.compositionName"
      :navActive="typePage"
      :compositionName="info.compositionName"
      :indexs.sync="indexType"
      :userId="userId"
      :dates="dates"
      :id="compositionId"
      :more_chart1_nav_list2="more_chart1_nav_list2"
      :one_contrastOptions_list="one_contrastOptions_list"
      @beyondIncome2Change="beyondIncome2ChangeHandle"
      :contrastOptObj="contrastOptions_obj"
      style="margin-top: 20px"
    >
    </chunk1>

    <chunk2
      v-if="typePage == 3"
      :dates="dates"
      :id_index="indexType"
      :contrastOptions_obj="contrastOptions_obj"
      style="margin-top: 20px"
    ></chunk2>
    <profitLossDialog
      v-if="compositionId"
      :profitLossDialogVisible.sync="profitLossDialogVisible"
      :investId="compositionId"
      :level="typePage === 1 ? 1 : 6"
    ></profitLossDialog>
    <!-- :investId="compositionId" -->
    <!-- :level="1"  组合-->
    <div class="fixTipReport" @click="profitLossDialogVisible = true">
      <i class="iconfont icon-ziliaoduibi"></i>
      <span>盈亏报告</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import chunk1 from "./chunk1";
import chunk2 from "./chunk2";
import pubChunk from "@/components/investComn/pubChunk.vue";
import { getHeadDetail } from "@/api/combManage";
import { parseTime } from "@/utils";
import { randomNum } from "@/utils/pro";
import addOrUpdateDialog from "../dialog";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import profitLossDialog from "@/views/afterManage/component/profitLossDialog.vue";

export default {
  name: "AfterManageCombinationDetails",
  components: {
    pubChunk,
    chunk1,
    chunk2,
    indexSelectTree,
    addOrUpdateDialog,
    profitLossDialog,
  },
  data() {
    return {
      profitLossDialogVisible: false,
      listLoading1: false,
      compositionId: "",
      info: {},
      typePage: 1,
      contrastOptions_obj: {},
      indexType: [],
      dates: [],
      more_chart1_nav_list2: [],
      one_contrastOptions_list: [],
      addOrUpdateView: false,
    };
  },
  created() {
    this.compositionId = this.$route.params && this.$route.params.id;
    this.getHeadDetail();
  },
  watch: {
    indexType: {
      handler(indexType) {
        if (Object.keys(this.contrastOptions_obj).length && indexType.length) {
          const oneList = [];
          indexType.forEach((item) => {
            oneList.push({
              id: item,
              name: this.contrastOptions_obj[item],
            });
          });
          this.one_contrastOptions_list = oneList;
        }
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    goContrast() {
      const res_list = [
        {
          id: this.compositionId,
          name: this.info.compositionName,
          type: 6,
        },
      ];
      const id = randomNum(6);
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list),
          one: 1,
        },
      });
    },
    goConfigPage() {
      this.compositionId;
      this.addOrUpdateView = true;
    },
    refreshPage() {
      const view = this.$route;
      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        const { fullPath } = view;
        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + fullPath,
          });
        });
      });
    },
    curNavHandle(i) {
      this.typePage = i;
    },
    beyondIncome2ChangeHandle(val) {
      this.indexType = [val, ...this.indexType];
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj;
      if (
        Object.keys(this.contrastOptions_obj).length &&
        this.indexType.length
      ) {
        const oneList = [];
        this.indexType.forEach((item) => {
          oneList.push({
            id: item,
            name: this.contrastOptions_obj[item],
          });
        });
        this.one_contrastOptions_list = oneList;
      }
    },
    getHeadDetail() {
      this.listLoading1 = true;
      getHeadDetail({
        compositionId: this.compositionId,
      }).then((res) => {
        console.log("组合详情", res.body);
        this.listLoading1 = false;
        // 多开标签 设置
        const tempRoute = Object.assign({}, this.$route);
        this.$setTagsViewTitle(
          tempRoute,
          `净值分析[投资组合]-${res.body.compositionName}`
        );
        document.title = `净值分析[投资组合]-${res.body.compositionName}`;
        this.info = res.body;
        this.indexType = [res.body.indexType];

        if (res.body.childrenId) {
          const realquery = {
            childrenId: res.body.childrenId,
            childrenName: res.body.childrenName,
            childrenType: res.body.childrenType,
          };
          this.$emit("update:realquery", realquery);
        }

        this.warehouseAdjustmentCycle = res.body.warehouseAdjustmentCycle;
        this.$emit(
          "update:warehouseAdjustmentCycle",
          res.body.warehouseAdjustmentCycle
        );

        this.dates[0] = parseTime(res.body.classifyNetWorthBean.startDate);
        this.dates[1] = res.body.classifyNetWorthBean.endDate
          ? parseTime(res.body.classifyNetWorthBean.endDate)
          : parseTime(new Date());

        let year0 = Number(this.dates[0].slice(0, 4));
        const year1 = Number(this.dates[1].slice(0, 4));
        const yearList = [];
        while (year0 <= year1) {
          yearList.push(year0 + "年度");
          year0++;
        }
        this.more_chart1_nav_list2 = yearList;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.am-combination-detailsPage {
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
    display: inline-block;
    margin-right: 10px;
  }
  .icon-jia {
    font-size: 12px;
    margin-right: 6px;
  }
  .icon-shuaxin {
    font-size: 13px;
    margin-right: 6px;
  }
  .nav {
    height: 56px;
    margin-top: 20px;
    padding: 0 24px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .nav-left {
      font-size: 18px;
      font-weight: 400;
      color: #262626;
      .nav-item {
        font-family: PingFangSC-Regular, PingFang SC;
        cursor: pointer;
        line-height: 56px;
        & + .nav-item {
          margin-left: 48px;
        }
      }
    }
    .typePage {
      color: #1890ff;
      border-bottom: 2px solid #1890ff;
    }
  }
}
</style>
